<template>
  <view class="repair-list-container">
    <!-- 搜索框 -->
    <view class="search-box">
      <image class="search-icon" src="/static/search.png" mode="aspectFit"></image>
      <input 
        class="search-input"
        type="text"
        placeholder="搜索"
        placeholder-style="color: #B5B5B5"
        v-model="searchText"
      />
    </view>

    <!-- 正在合作服务公司 -->
    <view class="section" v-if="contractList.length > 0">
      <view class="section-header">
        <image class="section-icon" src="/static/cooperation.png" mode="aspectFit"></image>
        <text class="section-title">正在合作服务公司</text>
      </view>
      <view class="company-list">
        <view class="company-item" v-for="(item, index) in contractList" :key="index">
          <text class="company-name">{{item.name}}</text>
        </view>
      </view>
    </view>

    <!-- 已收藏服务公司 -->
    <view class="section" v-if="collectionList.length > 0">
      <view class="section-header">
        <image class="section-icon" src="/static/favorite.png" mode="aspectFit"></image>
        <text class="section-title">已收藏服务公司</text>
      </view>
      <view class="company-list">
        <view class="company-item" v-for="(item, index) in collectionList" :key="index">
          <text class="company-name">{{item.name}}</text>
        </view>
      </view>
    </view>

    <!-- 推荐服务公司 -->
    <view class="section" v-if="recommendList.length > 0">
      <view class="section-header">
        <image class="section-icon" src="/static/recommend.png" mode="aspectFit"></image>
        <text class="section-title">推荐服务公司</text>
      </view>
      <view class="company-list">
        <view class="company-item" v-for="(item, index) in recommendList" :key="index">
          <text class="company-name">{{item.name}}</text>
        </view>
      </view>
    </view>

    <!-- 无数据提示 -->
    <view class="empty-tip" v-if="!hasAnyData">
      <text>暂无服务公司数据</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { relationApi } from '@/service/api.js'

const searchText = ref('')
const contractList = ref([]) // 合作列表
const collectionList = ref([]) // 收藏列表  
const recommendList = ref([]) // 推荐列表

// 计算是否有任何数据
const hasAnyData = computed(() => {
  return contractList.value.length > 0 || 
         collectionList.value.length > 0 || 
         recommendList.value.length > 0
})

// 获取维修商列表数据
const getRepairList = async () => {
  try {
    const res = await relationApi.getRelationList()
    if(res.code === undefined) {
      contractList.value = res.contracts || []
      collectionList.value = res.collections || []
      recommendList.value = res.all || []
    } else {
		 throw new Error(result.msg || '获取维修商列表失败')
	}
  } catch(e) {
    console.error('获取维修商列表失败:', e)
    uni.showToast({
      title: '获取数据失败',
      icon: 'none'
    })
  }
}

onMounted(() => {
  getRepairList()
})
</script>

<style lang="scss" scoped>
.repair-list-container {
  min-height: 100vh;
  background: #FFFFFF;
  padding: 32rpx;
}

// 搜索框样式
.search-box {
  display: flex;
  align-items: center;
  height: 88rpx;
  background: #F5F5F5;
  border-radius: 44rpx;
  padding: 0 32rpx;
  margin-bottom: 48rpx;

  .search-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 16rpx;
  }

  .search-input {
    flex: 1;
    height: 100%;
    font-size: 28rpx;
  }
}

// 分类区域样式
.section {
  margin-bottom: 48rpx;

  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;

    .section-icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 16rpx;
    }

    .section-title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
    }
  }

  .company-list {
    .company-item {
      height: 88rpx;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #EEEEEE;

      .company-name {
        font-size: 28rpx;
        color: #333333;
      }
    }
  }
}

// 添加空数据提示样式
.empty-tip {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200rpx;
  color: #999;
  font-size: 28rpx;
}
</style>
